<template>
  <div>
    <el-button-group>
      <el-button plain size="small" @click="$_zoomIn">放大</el-button>
      <el-button plain size="small" @click="$_zoomOut">缩小</el-button>
      <el-button plain size="small" @click="$_zoomReset">大小适应</el-button>
      <el-button plain size="small" @click="$_translateRest">
        定位还原
      </el-button>
      <el-button plain size="small" @click="$_reset">还原(大小&定位)</el-button>
      <el-button :disabled="undoDisable" plain size="small" @click="$_undo">
        上一步(ctrl+z)
      </el-button>
      <el-button :disabled="redoDisable" plain size="small" @click="$_redo">
        下一步(ctrl+y)
      </el-button>
      <el-button plain size="small" @click="$_download">下载图片</el-button>
      <el-button plain size="small" @click="$_catData">查看数据</el-button>
    </el-button-group>
  </div>
</template>
<script setup>
  const props = defineProps({
    lf: {
      type: Object || String,
      default: () => {},
    },
  })

  const emit = defineEmits(['cat-data'])

  const undoDisable = ref(true)
  const redoDisable = ref(true)
  // const graphData = ref(null)
  // const dataVisible = ref(false)

  onMounted(() => {
    props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
      undoDisable.value = !undoAble
      redoDisable.value = !redoAble
    })
  })

  const $_zoomIn = () => {
    props.lf.zoom(true)
  }
  const $_zoomOut = () => {
    props.lf.zoom(false)
  }
  const $_zoomReset = () => {
    props.lf.resetZoom()
  }
  const $_translateRest = () => {
    props.lf.resetTranslate()
  }
  const $_reset = () => {
    props.lf.resetZoom()
    props.lf.resetTranslate()
  }
  const $_undo = () => {
    props.lf.undo()
  }
  const $_redo = () => {
    props.lf.redo()
  }
  const $_download = () => {
    props.lf.getSnapshot()
  }
  const $_catData = () => {
    emit('cat-data')
  }
</script>
